<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import HomePanel from '@/views/Home/component/HomePanel.vue'
//import Goodsitem from '@/components/Goodsitem.vue'，非常不好后端写的这个结构，使得组件不可以复用

/*有后端啦*/

import { RouterLink } from 'vue-router'; 
import { ref, onMounted } from 'vue';

/*用一个很笨且浪费资源的办法 */
import { useRoute } from 'vue-router';

const route = useRoute(); // 获取当前路由信息
const content = route.params.content;  // 从 route.params 获取路径参数 'content'

//处理搜索
const data=ref([]);
const handleSearch=async()=>{
  try{
    //发送请求到后端
    const response=await fetch(`http://localhost:8080/good/searchByName/${encodeURIComponent(content)}`);
    
    //检查响应是否为成功
    if(response.ok){
      data.value=await response.json();
      console.log('返回的原始数据:', data);
    }else {
      console.error('请求失败，响应状态码:', response.status);
    }
  }catch(error){
    console.error('搜索请求失败:', error);
   
  }
}

// 使用 onMounted 在组件加载时调用 fetchCategoryTitle
onMounted(() => {
  handleSearch();
});
</script>
<template>
  <div class="container" :key="data.goodsId">
    <HomePanel title="搜索结果" :sub-title="content">
      <div class="body">
        <li v-for="good in data" :key="good.goodsId">
          <div class="goods-item">
          <RouterLink :to="`/goods/${good.goodsId}`">
            <img :src="good.imageUrl" alt="" />
            <p class="title">{{ good.goodsName }}</p>
            <p class="alt">￥{{ good.price }}</p>
          </RouterLink>
        </div>
        </li>
      </div>
    </HomePanel>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background: transparent; /* 设置背景透明 */
  border: none; /* 清除任何可能的边框 */
  box-shadow: none;
  width: 100%;
}
.body{
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

.goods-item {
      display: block;
      width: 220px;
      padding: 20px 30px;
      text-align: center;
      transition: all .5s;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }

      img {
        width: 160px;
        height: 160px;
      }

      p {
        padding-top: 10px;
      }

      .name {
        font-size: 16px;
      }

      .desc {
            color: #999;
            height: 29px;
        }

      .price {
            color: #d64242;
            font-size: 20px;
        }
    }

</style>
